<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格带表单+基本选择器</title>
  <style>
    /*1. css（层叠样式表：对页面进行美化）样式选择器：*/
    /*1.1 标签选择器：代表选择页面中所有标签（权重值1）*/
    table{
      width: 500px;
      border: 1px solid darkblue;
      border-collapse: collapse;
      color:gray;
    }
    td{
      border: 1px solid darkblue;
    }
    /*1.2 类别选择器: 选择页面中需要设置相同样式的哪些标签（权重值10）*/
    .t{
      background-color: lightyellow;
      color:red;
    }
    /*1.3 id选择器：代表选择页面中某个具体的元素（要求在页面中id名称必须唯一,权重值100）*/
    #sub{
      color: darkblue;
      font-weight: bolder;
    }
    /*小结选择器优先级：
      id选择器 > 类别选择器 > 标签选择器
    */
  </style>
</head>
<body>
<!--表格常用属性如下：
   ① border: 代表表格的线条粗细
   ② cellspacing: 代表表格线的间距
   ③ width/height: 代表格的宽度/高度
   ④ align: 代表表格相对于浏览器的水平对齐方式。
     可取值：left(默认值) / center / right
   ⑤ rules: 定义显示表格的水平线还是垂直线，可取值：
     rows: 代表显示行线
     cols: 代表显示列表
   ⑥ bgcolor: 设置表格的背景色
-->
<h3>1. 表格的基本用法<hr></h3>
<table border="1" cellspacing="0" width="500" align="center" >
  <tr align="center" bgcolor="#ffc0cb" >
    <td>学号</td>
    <td>姓名</td>
    <td>性别</td>
    <td>住址</td>
  </tr>
  <tr align="center">
    <td>1001</td>
    <td>张三</td>
    <td>男</td>
    <td>上海</td>
  </tr>
  <tr align="center">
    <td>1002</td>
    <td>李四</td>
    <td>女</td>
    <td>杭州</td>
  </tr>
  <tr align="center">
    <td>1003</td>
    <td>王五</td>
    <td>男</td>
    <td>深圳</td>
  </tr>
</table>
<h3>2. 表单的基础用法<hr></h3>
<!--form表单常用属性：
    ① name: 代表表单的名字
    ② action: 代表提交到后台的具体位置
    ③ method: 代表提交方式，可取值：get / post，它们的区别如下：
      get: 通过地址栏传参的方式实现数据的传递，因为受地址栏传递的数据长度不超过1024bytes的限制，所以，这种方式
           传递的数据大小不能超过1025bytes，并且因为数据会暴露出来，所以，不安全。
      post：通过请求体方式提交数据，所以，大小不受限制，安全性也有保证。
    form中常用组件：
    ① type=text: 代表文本框
    ② type=password: 代表密码框
    ④ type=radio: 代表单选按钮
    ⑤ type=checkbox：代表复选框
    ⑥ type=hidden: 代表隐藏域
    ⑦ type=file: 代表文件上传控件
    ⑧ type=button: 代表普通按钮
    ⑨ type=image: 代表图片按钮
    ⑩ type=submit: 代表提交按钮
    11 type=reset: 代表重置按钮
    12 select: 代表下拉列表框
    13 textarea：代表多行文本框
-->
<form action="/student/add" name="form1" method="get">
<table>
  <tr>
    <td class="t">用户名：</td>
    <td>
      <input type="text" name="sname">
    </td>
  </tr>
  <tr>
    <td class="t">性别：</td>
    <td>
      <!--单选按钮使用注意事项：
          ① name属性值必须一致。
          ② value属性代表提交到后台的值。
          ③ checked代表选中对应项。
          ④ 后面的文本代表显示出来的文本。
      -->
      <input type="radio" name="sex" value="男" checked>男
      <input type="radio" name="sex" value="女">女
    </td>
  </tr>
  <tr>
    <td class="t">
      密码：
    </td>
    <td>
      <input type="password" name="password" >
    </td>
  </tr>
  <tr>
    <td class="t">
      学生爱好：
    </td>
    <td>
      <!--复选框使用时的注意事项：
          ① name属性值也要一样，它提交到后台是一个数组。
          ② values属性值代表提交到后台的值。
          ③ 后面的文本代表显示到复选框后的值。
          ④ checked: 代表选中某个复选框。
      -->
      <input type="checkbox" name="interest" value="swim" checked>游泳
      <input type="checkbox" name="interest" value="ball" checked>打球
      <input type="checkbox" name="interest" value="song">唱歌
      <input type="checkbox" name="interest" value="game">游戏
    </td>
  </tr>
  <tr>
    <td class="t">
      学历：
    </td>
    <td>
      <!--select代表下拉列表框，注意如下问题：
          ① option代表一个下拉列表选项。
          ② option中的value代表提交到后台的值，中间部门代表显示在下拉列表项中的文本。
          ③ selected代表默认选中指定的下拉列表项。
          ④ multiple: 代表多选
          ⑤ size: 代表显示出来有几个下拉选项，默认值为1
      -->
      <select name="xueli" id="" multiple size="3">
        <option value="大专">大专</option>
        <option value="本科" selected>本科</option>
        <option value="硕士" selected>硕士</option>
        <option value="博士">博士</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class="t">
      我的照片：
    </td>
    <td>
      <!--文件上传组件-->
      <input type="file" name="photo" >
    </td>
  </tr>
  <tr>
    <td class="t">
      个人简历：
    </td>
    <td>
      <textarea name="intro"  cols="20" rows="3">
      </textarea>
    </td>
  </tr>
  <input type="hidden" name="sid" value="1001">
  <tr>
    <td class="t">
      常见按钮：
    </td>
    <td>
      <!--基本按钮：用于人机交互场景-->
      <input type="button" value="基本控件"
             onclick="alert('当前时间：' + new Date().toLocaleString())">
    </td>
  </tr>
  <tr>
    <td class="t" id="sub">提交重置按钮:</td>
    <td>
      <!--submit: 代表提交按钮，将数据由前端提交到后端。-->
      <!--reset: 代表重置按钮，将输入的数据清空！~-->
      <input type="submit" value="提交">
      <input type="reset" value="重置">
    </td>
  </tr>
  <tr>
    <td class="t">图片按钮:</td>
    <td>
      <!--图片按钮：也可以完成提交-->
      <input type="image" src="../img/btn.png" alt="">
    </td>
  </tr>
</table>
</form>
</body>
</html>
